<!DOCTYPE html>
<html>
	<head>
		<title><?php echo lang('site_title');?></title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">

		<link type="text/css" href="<?php echo base_url();?>static/css/google_map.css" />

		<script src="http://oosrrnck1.bkt.clouddn.com/static/js/libs/jquery.min.js"></script>
		<script src="http://oosrrnck1.bkt.clouddn.com/static/js/libs/jquery-ui.min.js"></script>

		<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_ak;?>&callback=googleMap.processor"></script>

	</head>
	<body>
		<h1><?php echo $title; ?></h1>


		<div data-id="formContainer" class="formContainer">
			经度：<input data-id="latitudeInput" value="" /><br />
			纬度：<input data-id="longitudeInput" value="" /><br />
			地址：<input data-id="addressInput" value="" />
		</div>
		
		<div class="searchHelper">
			<form ></form>
		</div>
		<div class="mapContainer" style="height:400px;"></div>

		<script type="text/javascript">

			var googleMap = {};
			googleMap.mapHandle = null;
			googleMap.container = document.getElementsByClassName("mapContainer")[0];
			googleMap.points = {
				init: {lat: -34.397, lng: 150.644},
				
				
			};
			googleMap.options = {
				init: {
					center: googleMap.points.init,
					zoom: 6
				},

			};

			googleMap.processor = function() {
				this.init();
				this.marker();
				this.pickerListener();
			};

			googleMap.init = function() {
				this.mapHandle = new google.maps.Map(this.container, this.options.init);
				this.infoWindow = new google.maps.InfoWindow();

				return this;
			};

			googleMap.marker = function() {
				var marker = new google.maps.Marker({
					position: this.points.init,
					map: this.mapHandle
				});

				return this;
			};

			googleMap.createMarker = function(place) {
				var placeLoc = place.geometry.location;
				var marker = new google.maps.Marker({
					map: this.mapHandle,
					position: place.geometry.location
				});
				console.log(place.name);

				google.maps.event.addListener(marker, "click", function() {
					console.log(place);
					googleMap.infoWindow.setContent(place.name);
					googleMap.infoWindow.open(googleMap.mapHandle, this);
				});
			};

			// 反向地理编码（地址查找）
			googleMap.reverseGeoCoding = function(location, callback) {
				var geocoder = new google.maps.Geocoder;

				geocoder.geocode({location: location}, function(results, status) {
					if (status === "OK") {
						if (results[1]) {
							console.log(results);
							address = results[1].formatted_address;
							if (typeof callback === "function") {
								callback(address);
							}
						} else {
							console.log("No results found");
						}
					} else {
						console.log("Geocoder failed due to: " + status);
					}
				});
			};

			googleMap.pickerListener = function() {
				googleMap.mapHandle.addListener("click", function(event){
					var location = event.latLng;
					inputLatLng(location);
					googleMap.reverseGeoCoding(location, inputAddress);
				});
			};

			function inputLatLng(latLng) {
				$("[data-id=formContainer]").find("[data-id=latitudeInput]").val(latLng.lat());
				$("[data-id=formContainer]").find("[data-id=longitudeInput]").val(latLng.lng());
			}
			function inputAddress(address) {
				$("[data-id=formContainer]").find("[data-id=addressInput]").val(address);
			}


		</script>






	</body>
</html>
